<template>
    <div>
      讲解生命周期
      <p ref="pp">{{ msg }}</p>
      <button @click="fn">点我获取 msg</button>
      <button @click="changeMsg">点我改 msg</button>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        msg: '你好哇世界!'
      }
    },
    methods: {
      fn() {
        console.log(this.msg)
      },
      changeMsg() {
        this.msg = 'Hello World!'
      }
    },
    // 与 data 平级, 写钩子函数
    beforeCreate() {
      console.log('beforeCreate', this.msg)
    },
    created() {
      // 只有在这个钩子后才可以访问 data 的数据和 methods 的方法
      // 此时还没有渲染 DOM, 所以无法获取 DOM 元素
      console.log('created', this.msg, this.$refs.pp)
    },
    beforeMount() {
      console.log('beforeMount', this.$refs.pp)
    },
    mounted() {
      console.log('mounted', this.$refs.pp)
    },
    // 只有在数据发生变化时才会执行
    // 数据都修改了, 只是 before 是指 DOM 更新前
    beforeUpdate() {
      console.log('beforeUpdate', this.msg, this.$refs.pp.innerHTML)
    },
    updated() {
      console.log('updated', this.msg, this.$refs.pp.innerHTML)
    },
    beforeDestroy() {
      // 一般用于清除一些全局的定时器之类的东西
      console.log('beforeDestroy')
    },
    destroyed() {
      console.log('destroyed')
    }
  }
  </script>
  
  <style>
  
  </style>